<!-- <div class="row justify-content-center mb-5">
    <div class="col-lg-8 text-center">
        <div class="hero-section p-5 rounded-3 bg-primary text-white shadow">
            <h1 class="display-4 fw-bold mb-3">🚀 微服务代码模版生成器</h1>
            <p class="lead mb-4">零配置，全功能，立即生成企业级微服务架构</p>
            <div class="d-flex gap-3 justify-content-center">
                <a class="btn btn-light btn-lg px-4" routerLink="/generate-application">立即创建</a>
                <button *ngIf="!isAuthenticated()" class="btn btn-outline-light btn-lg px-4" (click)="login()">登录解锁完整功能</button>
            </div>
        </div>
    </div>
</div> -->

<div [ngSwitch]="isAuthenticated()">
    <div *ngSwitchCase="false">
        <div class="row g-4">
            <!-- 功能卡片 -->
            <div class="col-md-6">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body p-4">
                        <div class="d-flex gap-3 align-items-center mb-3">
                            <div class="icon-wrapper bg-success text-white rounded-circle p-3">
                                <fa-icon icon="file-archive" size="2x"></fa-icon>
                            </div>
                            <h3 class="mb-0">快速生成</h3>
                        </div>
                        <p class="text-muted">通过简单表单配置项目参数，即时生成完整可运行的项目压缩包，支持：</p>
                        <ul class="text-muted">
                            <li>Spring Boot 后端</li>
                            <li>Angular/React 前端</li>
                            <li>Docker 部署配置</li>
                        </ul>
                        <a class="btn btn-success w-100 mt-3" routerLink="/generate-application">
                            <fa-icon icon="bolt" class="me-2"></fa-icon>立即生成
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body p-4">
                        <div class="d-flex gap-3 align-items-center mb-3">
                            <div class="icon-wrapper bg-info text-white rounded-circle p-3">
                                <fa-icon icon="cloud-upload-alt" size="2x"></fa-icon>
                            </div>
                            <h3 class="mb-0">云端集成</h3>
                        </div>
                        <p class="text-muted">登录后享受完整功能：</p>
                        <ul class="text-muted">
                            <li>直接推送代码到 GitHub/GitLab</li>
                            <li>自动化 CI/CD 流水线配置</li>
                            <li>历史配置版本管理</li>
                        </ul>
                        <div class="alert alert-info mt-3">
                            <fa-icon icon="info-circle" class="me-2"></fa-icon>
                            登录后可保存配置并管理生成历史
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-5">
            <div class="col-md-12">
                <div class="steps-header bg-light p-4 rounded-3 text-center mb-4">
                    <h2 class="mb-3">只需三步，开启微服务之旅</h2>
                    <div class="d-flex justify-content-center gap-5">
                        <div class="step-item">
                            <div class="step-icon bg-primary text-white rounded-circle">1</div>
                            <div class="step-title">配置项目</div>
                        </div>
                        <div class="step-item">
                            <div class="step-icon bg-primary text-white rounded-circle">2</div>
                            <div class="step-title">生成代码</div>
                        </div>
                        <div class="step-item">
                            <div class="step-icon bg-primary text-white rounded-circle">3</div>
                            <div class="step-title">部署运行</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div *ngSwitchCase="true">
        <div class="onboarding-steps">
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="card step-card h-100 border-start-4 border-primary shadow-sm">
                        <div class="card-body">
                            <div class="step-number text-primary mb-3">01</div>
                            <h3 class="h5">连接代码仓库</h3>
                            <p class="text-muted">配置您的GitHub/GitLab账户，开启自动化流程</p>
                            <a routerLink="/git" class="btn btn-outline-primary">
                                <fa-icon icon="link" class="me-2"></fa-icon>立即连接
                            </a>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card step-card h-100 border-start-4 border-success shadow-sm">
                        <div class="card-body">
                            <div class="step-number text-success mb-3">02</div>
                            <h3 class="h5">生成项目</h3>
                            <p class="text-muted">使用可视化配置生成完整项目架构</p>
                            <a routerLink="/generate-application" class="btn btn-outline-success">
                                <fa-icon icon="magic" class="me-2"></fa-icon>开始生成
                            </a>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card step-card h-100 border-start-4 border-info shadow-sm">
                        <div class="card-body">
                            <div class="step-number text-info mb-3">03</div>
                            <h3 class="h5">持续集成</h3>
                            <p class="text-muted">配置自动化构建和部署流程</p>
                            <a routerLink="/ci-cd" class="btn btn-outline-info">
                                <fa-icon icon="cogs" class="me-2"></fa-icon>配置CI/CD
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="quick-actions mt-5">
            <h3 class="mb-4">快捷操作</h3>
            <div class="row g-3">
                <div class="col-md-6">
                    <a routerLink="/generate-application" class="card action-card hover-shadow">
                        <div class="card-body d-flex align-items-center">
                            <div class="icon-circle bg-warning me-3">
                                <fa-icon icon="file-archive" class="text-white"></fa-icon>
                            </div>
                            <div>
                                <h5 class="mb-1">下载项目模板</h5>
                                <p class="text-muted mb-0">获取标准项目结构的ZIP包</p>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-6">
                    <a routerLink="/design-entities" class="card action-card hover-shadow">
                        <div class="card-body d-flex align-items-center">
                            <div class="icon-circle bg-purple me-3">
                                <fa-icon icon="project-diagram" class="text-white"></fa-icon>
                            </div>
                            <div>
                                <h5 class="mb-1">实体设计</h5>
                                <p class="text-muted mb-0">可视化数据模型设计工具</p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.hero-section {
    background: linear-gradient(135deg, #3f87a6, #ebf8e1);
}

.icon-wrapper {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-item {
    text-align: center;
}

.step-icon {
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin: 0 auto 10px;
    font-size: 1.2rem;
}

.onboarding-steps .step-number {
    font-size: 1.8rem;
    font-weight: bold;
}

.action-card {
    transition: transform 0.2s;
    border: 1px solid rgba(0,0,0,0.125);
}

.action-card:hover {
    transform: translateY(-5px);
}

.icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bg-purple {
    background-color: #6f42c1;
}

.hover-shadow {
    transition: box-shadow 0.3s ease;
}

.hover-shadow:hover {
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}
</style>